<template>
  <div class="container">
    <div class="title">
      <h2>角色管理</h2>
      <h5>用于管理小区里不定期举办的各种活动</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-form class="demo-form-inline">
        <el-form-item label="角色名称">
          <el-input v-model="queryData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryData.status" placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" size="small" @click="search">搜索</el-button>
          <el-button style="margin-left: 10px" size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card class="tableCard">
      <el-button
        style="float: right; padding: 10px 20px; margin-right: 80px"
        type="primary"
        size="small"
        class="addMenu"
        @click="openAddDialog"
      >新增项目</el-button>
      <el-table :data="tableData">
        <el-table-column prop="id" label="ID" width="40%" />
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="description" label="角色描述" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            {{ handleStatus(row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <template #default="{ row }">
            {{ formatterTime(row.create_time) }}
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" label="操作">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="editShow(row.id)">编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="delRole(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="queryData.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <auto-menu ref="addDialog" @updata="initData" />
  </div>
</template>

<script>
import AutoMenu from './components/menu-dialog.vue'
import { getRoleListApi, delRoleApi } from '@/api/auth/role'
import dayjs from 'dayjs'
export default {
  name: 'AuthRole',
  components: {
    AutoMenu
  },

  data() {
    return {
      tableData: [],
      // 请求参数
      queryData: {
        current: 1,
        pageSize: 10,
        create_time: '',
        status: null,
        name: ''
      },
      total: 0,
      statusList: [
        { value: 0, name: '关闭' },
        { value: 1, name: '启用' }
      ]
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 角色列表初始化
    async initData() {
      const { data: res } = await getRoleListApi(this.queryData)
      this.tableData = res.rows
      this.total = res.count
    },
    // 处理状态
    handleStatus(data) {
      if (data === 1) {
        return '启用'
      }
      if (data === 0) {
        return '关闭'
      }
    },
    formatterTime(value) {
      return value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : ''
    },
    // 分页器 => 每页显示条数
    handleSizeChange(val) {
      this.queryData.pageSize = val
      this.queryData.current = 1
      this.initData()
    },
    // 分页器 => 当前页
    handleCurrentChange(val) {
      this.queryData.current = val
      this.initData()
    },
    // 删除
    async delRole(id) {
      try {
        await this.$confirm('确定要删除此角色吗？', '温馨提示')
      } catch (error) {
        return this.$message('已取消')
      }
      // 处理边界线
      if (this.tableData.length === 1 && this.queryData.current > 1) {
        this.queryData.current--
      }
      await delRoleApi(id)
      this.$message.success('删除成功')
      this.initData()
    },
    // 打开抽屉弹框
    openAddDialog() {
      this.$refs.addDialog.drawer = true
      this.$refs.addDialog.getMenuList()
    },
    // 编辑回显
    editShow(id) {
      this.$refs.addDialog.getRoleDetail(id)
    },
    // 搜索
    async search() {
      const { data: res } = await getRoleListApi(this.queryData)
      this.tableData = res.rows
      this.total = res.count
    },
    // 重置
    reset() {
      this.queryData = {
        current: 1,
        pageSize: 10,
        create_time: '',
        status: null,
        name: ''
      }
      this.initData()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 40px;
  .addMenu {
    margin-bottom: 15px;
    margin-right: 0 !important;
  }
  .title {
    display: flex;
    align-items: center;
    h2 {
      margin-right: 20px;
    }
    h5 {
      font-weight: 400;
      color: #9c9c9d;
      vertical-align: middle;
    }
  }
  .demo-form-inline {
    display: flex;
  }
  .el-form-item {
    margin-right: 22px;

    ::v-deep .el-input__inner {
      height: 35px;
      line-height: 35px;
      width: 200px;
    }
  }

  .btn {
    padding-top: 40px;
    ::v-deep .el-form-item__content {
      display: flex;
    }
  }
  .box-card {
    margin-bottom: 10px;
  }
  .el-pagination {
    float: right;
    margin-top: 20px;
  }
}
</style>

